<template>
    <div class="contact-Edit">
        <van-nav-bar title="联系人" left-text="返回" left-arrow @click-left="back" />
        <van-contact-list v-model="chosenContactId" :list="list" @add="onAdd" @edit="onEdit" @select="onSelect" />
    </div>
</template>

<script>

export default {
    props: ["id"],
    components: {

    },
    data() {
        return {
            chosenContactId: "",
            list: [],
        }
    },
    methods: {
        back() {
            this.$router.back()
        },
        onAdd() {
            this.$router.push("/contactAdd")
        },
        onEdit(contact) {
            this.$router.push(`/contactUpdate/${contact.id}`)
        },
        onSelect(contact) {
            this.$axios.put(`${this.$api.contactUpdateState}/${contact.id}`)
                .then(res => res.data)
                .then(res => {
                    if (res.code == 200) {
                        this.$toast.success(res.msg)
                    } else {
                        this.$toast.error(res.msg)
                    }
                })
        },
        initList() {
            this.$axios.get(this.$api.contactGetAll)
                .then(res => res.data)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data
                        this.list.forEach(item => {
                            if (item.isDefault == 1) {
                                this.chosenContactId = Number(item.id)
                            }
                        })
                    }
                })

        }
    },

    mounted() {
        this.initList()
    }
}
</script>

<style scoped>
.van-icon {
    font-size: 20px;
}
</style>
